<template>
  <div>
    <div class="shopcart">
      <div class="content" @click="toggleList">
        <div class="content-left">
          <div class="logo-wrapper">
            <div class="logo" :class="{'highlight':totalCount>0}">
              <i class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></i>
            </div>
            <div class="num" v-if="totalCount>0">{{totalCount}}</div>
          </div>
          <div class="price">
            ￥{{totalPrice}}元
          </div>
          <div class="desc">￥另需配送费{{deliveryPrice}}元</div>
        </div>
        <!--@click.stop.prevent阻止事件冒泡-->
        <div class="content-right" @click.stop.prevent="pay">
          <div class="pay" :class="payClass" >
            {{payDesc}}
          </div>
        </div>
      </div>
      <div class="ball-container">
        <transition-group name="drop" tag="div" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
          <div v-for="(ball,index) in balls" v-show="ball.show" class="ball" :key="index">
            <div class="inner inner-hook"></div>
          </div>
        </transition-group>
      </div>
      <!--购物车详情-->
      <transition name="fold">
        <div class="shopcart-list" v-show="listShow">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click="empty">清空</span>
          </div>
          <div class="list-content" ref="listContent">
            <ul>
              <li class="food" v-for="food in selectFoods">
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price * food.count}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cartcontrol :food="food"></cartcontrol>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <!--列表背后的蒙版-->
    <transition name="fade">
      <div class="list-mask" v-show="listShow" @click="hideList"></div>
    </transition>
  </div>

</template>

<script>
  //引入BScroll库
  import BScroll from 'better-scroll';
  //引入增加和删减的组件
  import cartcontrol from '../cartcontrol/cartcontrol'
  export default {
    //接收参数
    props:{
      //选择商品
      selectFoods:{
        type:Array,
      },
      //配送费
      deliveryPrice:{
        type:Number,
        default:0
      },
      //最低起送费
      minPrice:{
        type:Number,
        default:0
      }
    },
    data(){
      return {
        balls:[
          {show:false},
          {show:false},
          {show:false},
          {show:false},
          {show:false}
        ],
        dropBall:[],
        fold:true
      }
    },
  //  计算属性
    computed:{
      //计算商品总价
      totalPrice(){
        let total=0;
        this.selectFoods.forEach((food)=>{
          total+=food.price * food.count;
        });
        return total;
      },
      //计算选择商品的数量
      totalCount(){
        let count=0;
        this.selectFoods.forEach((food)=>{
          count+=food.count;
        })
        return count;
      },
      //区分起送描述
      payDesc(){
        if(this.totalPrice === 0){
          return `￥${this.minPrice}元起送`
        }else if(this.totalPrice<this.minPrice){
          return `还差￥${this.minPrice-this.totalPrice}元起送`
        }else{
          return "立即结算"
        }
      },
      //区分起送样式
      payClass(){
        if(this.totalPrice<this.minPrice){
          return 'not-enough'
        }else{
          return 'enough'
        }
      },
    //  购物车是否展开和折叠
      listShow(){
        if(!this.totalCount){//如果商品数量为0
          this.fold=true;// 折叠购物车
          return false   //隐藏购物车
        }
        let show=!this.fold;  //fold为true的时候，show为false
        ////列表展示时初始化时better-scroll
        if(show){
          this.$nextTick(() => {
            //不存在 better-scroll，进行初始化，存在即调用 refresh方法
            if (!this.scroll) {
              this.scroll = new BScroll(this.$refs.listContent, {
                click: true
              });
            } else {
              this.scroll.refresh();
            }
          });
        }
        return show;
      }
    },
    methods:{
      //addFood 被触发后调用drop方法
      addFood(target) {
        this.drop(target);
      },
      //得到event.target的值，执行drop方法，将得到的event.target当参数使用
      drop(el){//从goods中的事件addFood得到target（符号+ 的dom）
          // 找到点击的符号+的物理位置
          //遍历ball
        for(let i=0;i<this.balls.length;i++){
          let ball=this.balls[i];
          //如果当前小球的show为false 则设置当前球的show为true
          if(!ball.show){
            ball.show=true;
            ball.el=el;////将符号+的dom 复制给ball的el属性
            this.dropBall.push(ball);//将掉下的球放在数组dropBall中
            return //跳出循环
          }
        }
      },
    //  定义过渡的方法(可复用)
      beforeEnter(el) {
        //遍历小球
        let count=this.balls.length;
        while(count--){
          let ball=this.balls[count];//得到当前的小球
          if(ball.show){//如果当前的小球是true(运动的小球)
            let rect=ball.el.getBoundingClientRect();//当前符号+的视口位置
            let x=rect.left-32;
            let y=-(window.innerHeight-rect.top-22);
            el.style.display="";
            // el （初始位置为 0，0，0）和购物车icon在一起，将小球（el）  放到加号位置去
            //纵向动画
            el.style.webkitTransform = `translate3d(0,${y}px,0)`;
            el.style.transform = `translate3d(0,${y}px,0)`;
            //横向动画  inner-hook，  仅仅定义类 dom选择器，不做样式
            let inner = el.getElementsByClassName('inner-hook')[0];
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
            inner.style.transform = `translate3d(${x}px,0,0)`;
          }
        }
      },
      enter(el,done){
        //手动触发浏览器重绘，便于translate3d，--rf 变量不会使用
        let rf = el.offsetHeight;
        this.$nextTick(() => {
          //小球样式位置，置于购物车按钮位置处
          el.style.webkitTransform = 'translate3d(0,0,0)';
          el.style.transform = 'translate3d(0,0,0)';
          let inner = el.getElementsByClassName('inner-hook')[0];
          inner.style.webkitTransform = 'translate3d(0,0,0)';
          inner.style.transform = 'translate3d(0,0,0)';
          el.addEventListener("transitionend",done);
        })
      },
      afterEnter(el) {
        //此轮动画结束后，将此次的 ball 取出 ，ball状态重置，，el display:none
        let ball = this.dropBall.shift();
        if(ball){
          ball.show = false;
          el.style.display = "none";
        }
      },
      //定义购物车展示和隐藏
      toggleList(){
        if(!this.totalCount){//如果数量为0 的话，点击数无效的
          return
        }
        this.fold=!this.fold;///显示或隐藏（toggle）
      },
      //清空
      empty(){
        this.selectFoods.forEach((food)=>{
          food.count=0; //将数量变成0
        })
      },
      //隐藏列表
      hideList(){
        this.fold=true
      },
    //  去支付
      pay(){
        if(this.totalPrice<this.minPrice){//当小于当前的最小额度值，无法结算
          return
        }
        window.alert(`需支付${this.totalPrice}元`);
      }
    },
    components: {
      cartcontrol
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .shopcart
    position: fixed
    left: 0
    bottom: 0
    z-index: 50
    width: 100%
    height: 48px
    .content
      display: flex
      background: #141d27
      font-size: 0
      color: rgba(255, 255, 255, 0.4)
      .content-left
        flex: 1
        .logo-wrapper
          display: inline-block
          vertical-align: top
          position: relative
          top: -10px
          margin: 0 12px
          padding: 6px
          width: 56px
          height: 56px
          box-sizing: border-box
          border-radius: 50%
          background: #141d27
          .logo
            width:100%
            height:100%
            border-radius:50%
            text-align:center
            background-color:#2b343c
            &.highlight
              background: rgb(0, 160, 220)
            .icon-shopping_cart
              line-height: 44px
              font-size: 12px
              color: #80858a
              &.highlight
                color: #fff
          .num
            position: absolute
            top: 0
            right: 0
            width: 24px
            height: 16px
            line-height: 16px
            text-align: center
            border-radius: 16px
            font-size: 9px
            font-weight: 700
            color: #fff
            background: rgb(240, 20, 20)
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4)
        .price
          display: inline-block
          vertical-align: top
          margin-top: 12px
          line-height: 24px
          padding-right: 12px
          box-sizing: border-box
          border-right: 1px solid rgba(255, 255, 255, 0.1)
          font-size: 16px
          font-weight: 700
          &.highlight
            color: #fff
        .desc
          display: inline-block
          vertical-align: top
          margin: 12px 0 0 12px
          line-height: 24px
          font-size: 10px
      .content-right
        flex: 0 0 105px
        width: 105px
        .pay
          height: 48px
          line-height: 48px
          text-align: center
          font-size: 12px
          font-weight: 700
          &.not-enough
            background: #2b333b
          &.enough
            background: #00b43c
            color: #fff
    .ball-container
      .ball
        position: fixed
        left: 32px
        bottom: 22px
        z-index: 200
        &.drop-enter-active
          transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
        .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: rgb(0, 160, 220)
          transition: all 0.4s linear
    .shopcart-list
      position absolute
      left:0
      right:0
      top:0
      width:100%
      z-index :-1
      transform :translate3d(0,-100%,0)
      &.fold-enter-active, &.fold-leave-active
        transition :all 0.4s linear
      &.fold-enter, &.fold-leave-active
        transform :translate3d(0,0,0)
      .list-header
        height: 40px
        line-height: 40px
        padding: 0 18px
        background: #f3f5f7
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        .title
          float: left
          font-size: 14px
          color: rgb(7, 17, 27)
        .empty
          float: right
          font-size: 12px
          color: rgb(0, 160, 220)

      .list-content
        padding: 0 18px
        max-height: 217px
        overflow: hidden
        background: #fff
        .food
          position: relative
          padding: 12px 0
          box-sizing: border-box
          border-1px(rgba(7, 17, 27, 0.1))
          .name
            line-height: 24px
            font-size: 14px
            color: rgb(7, 17, 27)
          .price
            position: absolute
            right: 90px
            bottom: 12px
            line-height: 24px
            font-size: 14px
            font-weight: 700
            color: rgb(240, 20, 20)
          .cartcontrol-wrapper
            position: absolute
            right: 0
            bottom: 6px
  /*遮罩层蒙版*/
  .list-mask
    position fixed;
    left:0;
    right:0;
    top:0;
    bottom 0;
    -webkit-backdrop-filter :blur(30px)
    background-color :rgba(7,17,27,0.6)
    //进入动画
    &.fade-enter-active,&.fade-leave
      transition: all 0.5s
      //离开时动画
    &.fade-enter,&.fade-leave-active
      opacity: 0
      background: rgba(7, 17, 27, 0)
</style>
